<template>
  <div class="dict-type">
    <el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" inline>
        #foreach ($column in $columns) #if($column.query)
        #set($comment=$column.columnComment)
        <el-form-item label="${comment}">
          #if($column.htmlType == "input")
          <el-input
            class="w-[280px]"
            v-model="queryParams.${column.javaField}"
            clearable
            @keyup.enter="resetPage"
          />
          #elseif(($column.htmlType == "select" || $column.htmlType == "radio")
          && "" != $dictType)
          <el-select
            class="w-[280px]"
            v-model="queryParams.${column.javaField}"
          >
            <el-option label="全部" value />
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue"
              v-for="dict in dictDatas.${dictType}"
            />
          </el-select>
          #elseif($column.htmlType == "datetime")
          <daterange-picker
            v-model:startTime="queryParams.${column.javaField}_startTime"
            v-model:endTime="formData.${column.javaField}_endTime"
          />
          #else
          <el-input
            class="w-[280px]"
            v-model="queryParams.${column.javaField}"
            clearable
            @keyup.enter="resetPage"
          />
          #end
        </el-form-item>
        #end #end
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <div>
        <el-button
          type="primary"
          @click="handleAdd"
          v-perms="['${moduleName}:${businessName}:add']"
        >
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
        <el-button
          :disabled="!selectData.length"
          type="danger"
          v-perms="['${moduleName}:${businessName}:del']"
          @click="handleDelete(selectData)"
        >
          <template #icon>
            <icon name="el-icon-Delete" />
          </template>
          删除
        </el-button>
      </div>
      <div class="mt-4" v-loading="pager.loading">
        <div>
          <el-table
            :data="pager.lists"
            size="large"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            #foreach($column in $columns) #set($javaField=$column.javaField)
            #set($comment=$column.columnComment) #if($column.pk)
            <el-table-column label="ID" prop="${javaField}" />
            #end #if($column.list) #if("" != $column.dictType)
            <el-table-column label="${comment}">
              <template v-slot="{ row }">
                <template v-for="dict in  dictDatas.${column.dictType}">
                  <el-tag
                    v-if="row.${javaField}==dict.dictValue"
                    :type="dict.listClass"
                    >{{ dict.dictLabel }}
                  </el-tag>
                </template>
              </template>
            </el-table-column>

            #else
            <el-table-column
              label="${comment}"
              prop="${javaField}"
              min-width="120"
              show-tooltip-when-overflow
            />
            #end #end #end

            <el-table-column label="操作" width="190" fixed="right">
              <template #default="{ row }">
                <el-button
                  v-perms="['${moduleName}:${businessName}:edit']"
                  link
                  type="primary"
                  @click="handleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-perms="['${moduleName}:${businessName}:del']"
                  link
                  type="danger"
                  @click="handleDelete([row.id])"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="${BusinessName}">
    import {
            ${BusinessName}Delete,
            ${BusinessName}List,
    } from "@/api/${moduleName}/${businessName}";

    import {dictDataByTypes} from '@/api/setting/dict';

    import {usePaging} from "@/hooks/usePaging";
    import {getRoutePath} from "@/router";
    import {useDictOptions} from "@/hooks/useDictOptions";
    import feedback from "@/utils/feedback";
    import EditPopup from "./edit.vue";

    const editRef = shallowRef < InstanceType < typeof EditPopup >> ();
    const showEdit = ref(false);
        #if(${dicts} != '')
        //返回的字典
        const dicts = ref(${dicts})
        //存储字典数据 格式 :{字典名称: [] }
        const dictDatas=reactive(<any>{});
        #end

        const queryParams = reactive({
        #foreach ($column in $columns)
            #if($column.query)
                #if($column.htmlType == "datetime")
                        ${column.javaField}__startTime:null,
                    ${column.javaField}__endTime:null,
                #else
                    $column.javaField: null,
                #end
            #end
        #end
    });

//存储需要查询的所有字段,便于查询组件操作
 const queryObj=reactive({
 #foreach ($column in $columns)
            #if($column.query)
                 htmlType:${column.htmlType}, //表单诶类型
                 javaField:${column.javaField}, //字段名
                 comment:${column.columnComment}, //描述
                 queryType:${column.queryType},//查询类型
            #end
        #end

 });


const {pager, getLists, resetPage, resetParams} = usePaging({
        fetchFun: ${BusinessName}List,
        params: queryParams,
});

        const selectData = ref <any[]>([]);

        const handleSelectionChange = (val: any[]) => {
        selectData.value = val.map(({id}) => id);
    };

        const handleAdd = async () => {
        showEdit.value = true;
        await nextTick();
        editRef.value?.open("add");
    };

        const handleEdit = async (data: any) => {
        showEdit.value = true;
        await nextTick();
        editRef.value?.open("edit");
        editRef.value?.setFormData(data);
    };

        // 删除角色
        const handleDelete = async (ids: any[]) => {
        await feedback.confirm("确定要删除？");
        await ${BusinessName}Delete(JSON.stringify(ids));
        feedback.msgSuccess("删除成功");
        getLists();
    };

        #if(${dicts} != '')
            //查询字典
            dictDataByTypes(${dicts}.split(",")).then(res=>{
            dictDatas = res;
        });

        #end
        getLists();
</script>
